<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="readl-time-video">
    <div
      v-for="(item,index) in data.videoList"
      :class="['video-list',data.warningNumTotal[item.id] > 0?'warning':'']"
      :key="index"
      @mousemove="onMounseMove(index)"
      @mouseleave="onMounseLeave(index)"
    >
      <div class="title-header">
        <span class="main-title">
          <span class="main-title-content">{{item.id}} {{item.label}}</span>
          <span
            v-show="data.warningNumTotal[item.id] > 0"
            class="tips-total"
          >告警{{data.warningNumTotal[item.id] || 0}}</span>
        </span>
      </div>
      <div class="video-main">
        <img
          :src="`http://183.6.88.43:${item.port}/Safe/video_feed?camera_name=${item.id}&width=576&height=432`"
        />
        <img
          class="tool-action"
          @click="handleScaleVideo(item.id,`${item.id}-${item.label}`)"
          v-if="data.activeIndex === index"
          src="../../assets/png/icon-fullscreen.png"
        />
      </div>
    </div>

    <!-- vidoe dialog -->
    <el-dialog v-model="data.dialogTableVisible" :title="data.selectedCameraName" width="820px">
      <!-- 820 *  -->
      <div
        class="dialog-video-container"
        ref="fullScrean"
        @mouseover="onMouseOver"
        @mouseleave="onMouseLeave"
      >
        <img
          @click="handleFullScreen"
          v-show="data.fignerHover"
          class="icon-expand"
          :src="require(`../../assets/png/icon-${!data.isFull?'fullscreen':'outscreen'}.png`)"
        />
        <img style="width:100%" :src="videoSrc" />
      </div>
    </el-dialog>
  </div>
  <WarningList />
</template>

<script setup>
import { reactive, onMounted, ref, onUnmounted, computed, nextTick } from "vue";
import WarningList from "../Overflow/components/WarningList.vue";
import http from "@/api/index.js";
const websorket = ref(null);
const fullScrean = ref(null);
const data = reactive({
  dialogTableVisible: false,
  selectedCamera: "",
  selectedCameraName: "",
  fignerHover: false,
  videoWidth: 780,
  videoHeight: 648,
  isFull: false,
  // 8010  8011  8012
  videoList: [
    { id: "C1", label: "物资码头泊位001", port: 8010 },
    { id: "C3", label: "物资码头泊位002", port: 8010 },
    { id: "C5", label: "物资码头岸边", port: 8010 },
    { id: "C8", label: "物资码头通道004", port: 8010 },
    { id: "C9", label: "C9-物资码头地磅001", port: 8011 },
    { id: "C18", label: "物资码头通道003", port: 8011 },
    { id: "C26", label: "物资码头泊位01-2", port: 8011 },
    { id: "C27", label: "物资码头1/2区中1", port: 8011 },
    { id: "C28", label: "物资码头-油站", port: 8012 },
    { id: "C29", label: "物资码头-4通道", port: 8012 },
    { id: "C30", label: "物资码头-5通道", port: 8012 },
    { id: "C31", label: "物资码头-中间通道", port: 8012 }
  ],
  detect_info_list: [], //实时告警
  activeIndex: "",
  warningNumTotal: {}
});
const videoSrc = computed(() => {
  return `http://183.6.88.43:8010/Safe/video_feed?camera_name=${data.selectedCamera.toUpperCase()}&width=${
    data.videoWidth
  }&height=${data.videoHeight}`;
});
const handleScaleVideo = (id, name) => {
  data.selectedCamera = id;
  data.selectedCameraName = name;
  data.dialogTableVisible = true;
};


const onMouseOver = () => {
  data.fignerHover = true;
};
const onMouseLeave = () => {
  data.fignerHover = false;
};

const onMounseMove = index => {
  data.activeIndex = index;
};
const handleFullScreen = () => {
  if (!data.isFull) {
    data.isFull = true;
    data.videoWidth = window.innerWidth;
    data.videoHeight = window.innerHeight;
    fullScrean.value.requestFullscreen();
  } else {
    data.isFull = false;
    data.videoWidth = 780;
    data.videoHeight = 648;
    document.exitFullscreen();
  }
};

const getWarningNumber = () => {
  http({
    name: "getStatistic",
    _url: `http://183.6.88.43:8007/Safe/get_alarm_24h`
  })
    .then(res => {
      data.warningNumTotal = res.data.alarm_sorted_dict;
    })
    .catch(err => {
      console.log(err);
    });
};
const onMounseLeave = () => {
  data.activeIndex = "";
};
const interval = ref(null);
onMounted(() => {
  interval.value = setInterval(() => {
    getWarningNumber();
  }, 4000);
});
onUnmounted(() => {

});
</script>

<style lang="less" scoped>
.readl-time-video {
  padding: 24px;
  background: rgba(0, 16, 61, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: auto;
  .warning {
    box-shadow: 0px 0px 6px 4px #ff2222 !important;
    .video-main {
      box-shadow: 0px 0px 6px 4px #ff2222 !important;
    }
  }
  .video-list {
    flex: 1;
    margin: 0 8px 16px 8px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    // width: 608px;
    // height: 311px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 100%
    );

    .title-header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 46px;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      padding: 0 16px;
      z-index: 1;

      .main-title {
        height: 46px;
        flex: 1;
        display: flex;
        align-items: center;
        // border-bottom: 1px solid rgba(232, 232, 232, 1);
        .main-title-content {
          flex: 1;
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }
        .tips-total {
          height: 30px;
          background: #ff2222;
          border-radius: 4px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0 8px;
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 22px;
        }
      }
    }
    .video-main {
      // flex: 1;
      // height: 432px;
      border-radius: 4px;
      position: relative;
      & > img {
        width: 100%;
        // height: 100%;
      }
      .tool-action {
        position: absolute;
        bottom: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        cursor: pointer;
      }
    }
  }
}
.dialog-video-container {
  width: 780px;
  height: 648px;
  border-radius: 4px;
  background: #8c8c8c2b;
  position: relative;
  display: flex;
  .icon-expand {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }
}
</style>